<template>
  <section class="wrapper">
    <myHeader :obj="myObj" @events="events"></myHeader>
    <main>
      <nav class="nav_0310">
        <span class="current_0310">约见选项</span>
        <span>沟通对话</span>
      </nav>
      <myCourse :level="level"></myCourse>
      <div class="bigCircleWrap_0310">
        <div class="items_0310 dt_0310"><i class="bigCircle_0310"></i></div>
        <div class="items_0310"></div>
      </div>
      <div class="infoWrap_0310">
        <div class="infoItem_0310">
          <label class="label_0310">行家</label>
          <div class="info_0310">刘宏</div>
        </div>
      </div>
      <div class="infoWrap_0310">
        <div class="infoItem_0310">
          <label class="label_0310">时间</label>
          <div class="info_0310">
            <time class="time">2018-10-23 9:00</time>  <i class="iIcon_0310"></i>
          </div>
        </div>
      </div>
      <div class="infoWrap_0310">
        <div class="infoItem_0310">
          <label class="label_0310">联系电话</label>
          <div class="info_0310">
            <input class="phone_0310" placeholder="输入手机或固话" type="number">
          </div>
        </div>
      </div>
      <div class="infoWrap_0310">
        <div class="infoItem_0310">
          <label class="label_0310">约见地点</label>
          <div class="info_0310">
            <input class="position_0310" placeholder="输入地址" type="text">
          </div>
        </div>
      </div>
      <div class="infoWrap_0310 agree_0312">同意</div>
      <myButton>取消约见</myButton>
      <mt-datetime-picker
        v-model="pickerVisible"
        type="date"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日">
      </mt-datetime-picker>
    </main>

  </section>
</template>
<script>
import myHeader from './base/myHeader';
import myButton from './base/myButton';
import myCourse from './base/myCourse'; 
import hgjSkip from '../assets/js/hgjSkip';
import { DatetimePicker } from 'mint-ui';
import { axiosPost } from '../assets/api';
import Client from '../assets/js/common';
export default {
  
  data () {
    return {
      myObj: {
        type: 3,
        text: '约见详情'
      },
      level: 3,
      pickerVisible: '',
    }
  },
  created () {

    // hgjSkip.skip().then(res => {
        
    // }) 
    hgjSkip.changelocation();
    
  },
  methods: {
    events(i) {
      if(i == 2) {
        history.back();
      }
    }

      
  },
  components: {
    myHeader,
    myCourse,
    myButton,
    DatetimePicker
  }
}

</script>
<style lang="less">
  .wrapper {
    width: 3.75rem;
    height: 100%;
    main {
      width: 3.75rem;
      height: 100%;
      padding-top: .44rem;
      position: absolute;
      top: 0;
      left: 0;
      overflow-y: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      .agree_0312 {
        font-size: .2rem;
        color: #555555;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0!important;
        margin-bottom: .27rem;
      }
      .infoWrap_0310 {
        width: 100%;
        height: .43rem;
        padding-left: .15rem;
        box-sizing: border-box;
        background: white;
        .infoItem_0310 {
          width: 3.6rem;
          height: .42rem;
          border-bottom: .01rem solid #E5E5E5;
          display: flex;
          justify-content: space-between;
          .label_0310 {
            display: block;
            width: 1.05rem;
            height: .42rem;
            line-height: .42rem;
            font-size: .17rem;
            color: #000000;
          }
          .info_0310 {
            width: 2.5rem;
            height: .42rem;
            line-height: .42rem;
            color: #828282;
            font-size: .17rem;
            padding-right: .15rem;
            box-sizing: border-box;
            text-align: right;
            .iIcon_0310 {

            }
            .phone_0310 {
              width: 1.3rem;
              height: .4rem;
              font-size: .17rem;
              color: #B2B2B2;
              border: none;
            }
            .position_0310 {
              height: .4rem;
              font-size: .17rem;
              color: #B2B2B2;
              border: none;
            }
            .time_0310 {
              font-size: .17rem;
              color: #B2B2B2;
            }
          }
        }
      }
      .bigCircleWrap_0310 {
        height: 0.92rem;
        .items_0310 {
          height: 50%;
          background: white;
          .bigCircle_0310 {
            display: block;
            width: .6rem;
            height: .6rem;
            border: .05rem solid white;
            background: #E5E5E5;
            border-radius: 50%;
            margin: 0 auto;
            position: relative;
            z-index: 3;
          }
        }
        .dt_0310 {
          background: #EFEFF4;
          padding-top: .11rem;
          box-sizing: border-box;
        }


      }
      .nav_0310 {
        width: 100%;
        height: .47rem;
        display: flex;
        justify-content: space-between;
        background: #FAFAFA;
        padding: 0 .6rem;
        box-sizing: border-box;
        border-bottom: .01rem solid #f2f2f2;
        box-shadow: inset 0pt -0.5pt 0pt 0pt rgba(229, 229, 229, 1);
        span {
          display: block;
          width: .85rem;
          height: .47rem;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: .14rem;
          color: #39393D;
          &.current_0310 {
            height: .44rem;
            border-bottom: .03rem solid #39393D;
            color: #353535;
            font-weight: bold;

          }
        }

      }
    }
    
  }
</style>
